@extends('admin.layouts.app')
@section('product','active')
@section('pro-type','active')


@section('title','商品类型管理')
@section('content')
<div id="picbox" style="display:none;position:fixed;right:130px;top:130px;width:;height:300px;z-index:99999;background:#999">
</div>
<div class="container-fluid">
    <div class="block-header">
        <h2>
            商品类型管理
        </h2>
    </div>
    <!-- Basic Table -->
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        商品类型列表
                    </h2>
                    <div class="align-left" style="margin-top:10px;">
                        <button class="btn btn-default waves-effect" data-color="teal" data-target="#smallModal" data-toggle="modal"  type="button">
                            <i class="material-icons" >
                                add
                            </i>  添加商品类型
                        </button>
                        <!-- Small Size -->
                        <div class="modal fade" id="smallModal" role="dialog" tabindex="-1">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="smallModalLabel">
                                            添加商品类型
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('pro-type.store') }}" id="form_validation" method="POST">
                                            {{csrf_field()}} 
                                                <div class="form-group">
                                                    <input class="form-control" name="type_name" placeholder="分类名称" required="" type="text">
                                                    </input>
                                                </div> 
                                                <button class="btn btn-primary " type="submit">
                                                    添加
                                                </button>
                                            </input>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
                <div class="body table-bordered">
                    <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    类型名称
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($types as $type)
                            <tr>
                            <td>
                                {{$type->id}}
                                </td>
                                <td>
                                    {{$type->type_name}}
                                </td>
                                <td width="30%">
                                    <a href="{{ route('attributes.typeshow',$type->id) }}" class="btn bg-primary btn-xs "><i class="material-icons">view_list</i> <span>属性列表</span></a>
                                    <a href="" class="btn btn-warning btn-xs"><i class="material-icons">edit</i><span>修改</span></a>
                                    <a href="{{route('pro-type.destroy',$type->id)}}" class="btn btn-xs bg-red"><i class="material-icons">delete</i><span>删除</span></a>
                                </td>
                                </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# Basic Table -->
</div>
@endsection

@section('js-script')
    {{-- expr --}}
<!-- JQuery DataTable Css -->
<link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <!-- Jquery Core Js -->
    <script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}">
    </script>
    <!-- Bootstrap Core Js -->
    <script src="{{ asset('admin/plugins/bootstrap/js/bootstrap.js') }}">
    </script>
    <!-- Select Plugin Js -->
    <script src="{{ asset('admin/plugins/bootstrap-select/js/bootstrap-select.js') }}">
    </script>
    <!-- Slimscroll Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-slimscroll/jquery.slimscroll.js') }}">
    </script>
    <!-- Waves Effect Plugin Js -->
    <script src="{{ asset('admin/plugins/node-waves/waves.js') }}">
    </script>
    <!-- Jquery DataTable Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.flash.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/jszip.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/pdfmake.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/vfs_fonts.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.html5.min.js') }}">
    </script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.print.min.js') }}">
    </script>
    <!-- Custom Js -->
    <script src="{{ asset('admin/js/admin.js') }}">
    </script>
    <script src="{{ asset('admin/js/pages/tables/jquery-datatable.js')}}">
    </script>
    <!-- Demo Js -->
    <script src="{{ asset('admin/js/demo.js') }}">
    </script>
    <script>
        $(".big_pic").hover(function(){
            $('#picbox').show();
            $('#picbox').append('<img src="'+$(this).attr("src")+'" style="width:100%;height:300px;"/>')
            console.log($(this).attr("src"));
        },function(){
            $("#picbox").hide();
            $("#picbox > img").remove();
        })
    </script>
    @endsection
</link>